<template>
  <section>
    <section class="map__poi" :style="{right: poiSearchStyleRight}">
      <el-input @keyup.enter.native="handleLoadAndQuery" placeholder="搜索兴趣点" v-model="poiName">
        <el-button slot="append" @click="handleLoadAndQuery" icon="el-icon-search" class="map__poi--search"></el-button>
      </el-input>
      <el-collapse-transition>
        <section class="map__poi--result" v-loading="tableLoading" v-show="poiResultShow">
          <section class="map__poi--result__wrapper">
            <template v-if="dataCollection.length>0">
              <template v-for="(item,index) in dataCollection">
                <section class="map__poi--result__item" @click="handleFeatureSelect(item)">
                  <section class="map__poi--result__item--index">{{(index+1)}}、</section>
                  <section class="map__poi--result__item--name" >
                    <section class="left">{{item.properties.name || ''}}</section>
                    <section class="right">{{item.properties.kind || ''}}</section>
                  </section>
                </section>
              </template>
            </template>

            <template v-else>
              <avue-empty
                desc="暂无数据或请求失败" style="margin-top: 8px;margin-bottom: 8px;">
                <el-button size="small" type="primary">刷新</el-button>
              </avue-empty>
            </template>
          </section>

          <section class="map__poi--foot">
            <el-button @click="closePoi" type="text">关闭</el-button>
            <el-button @click="clearPoi" type="text">清空</el-button>
            <section v-if="dataCollection.length>0">
              <el-pagination
                :current-page="page.current"
                :page-size="page.limit"
                :pager-count="5"
                :total="page.total"
                small
                background
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                layout="prev, pager, next">
              </el-pagination>
            </section>
          </section>
        </section>
      </el-collapse-transition>
    </section>
    <map-poi-info ref="mapPoiInfo"
                  :poi-info="poiInfo"
                  :map-dialog-visible="mapDialogVisible"
                  @close="mapDialogVisible = false">
    </map-poi-info>
  </section>
</template>

<script>
  // import commonApi from '@/api/system'
  // import { mapTip } from '@/enums/BusinessPrompt'
  import { MethodsMixin, QueryParamsMixin } from '@/mixins/global'
  import mapPoiInfo from './map-poi-info'
  // import $ from 'jquery'
  export default {
    name: 'map-poi-search',
    mixins: [MethodsMixin, QueryParamsMixin],
    inject: ['commonMap'],
    components: {
      'map-poi-info': mapPoiInfo
    },
    props: {
      map: {
        type: Object
      },
      poiSearchStyleRight: {
        type: String
      },
      // 点击兴趣点相关参数
      clickPoi: {
        type: Object,
        default: () => {
          return {
            // 点击兴趣点关闭列表
            closePoiList: false,
            // 点击兴趣点是否显示详情
            showPoiInfo: true,
            // 是否显示标题
            showPoiTitle: true
          }
        }
      }
    },
    data() {
      return {
        mapDialogVisible: false,
        // 兴趣点列表时候显示
        poiResultShow: false,
        // 搜索的兴趣点名称
        poiName: '',
        poiInfo: {
          properties: {}
        }
      }
    },
    mounted() {
    },
    methods: {
      /**
       * @Author yuesheng.zhu@topevery.club
       * @Date 2019/5/16 15:37
       * @Description 兴趣点查询
       */
      handleLoadAndQuery() {
        // if (!this.validatenull(this.poiName)) {
        //   this.poiResultShow = true
        //   this.tableLoading = true
        //   this.page.limit = 10
        //   commonApi.listPmrGeometry(this.poiName, this.page).then((res) => {
        //     this.tableLoading = false
        //     this.dataCollection = res.data
        //     this.page.total = res.total
        //     // if (res.total === 0) {
        //     //   this.$message.error(`${mapTip.Message.poiError}`)
        //     // }
        //     this.showPoi()
        //   })
        //     .catch(() => {
        //       this.tableLoading = false
        //     })
        //   // const url = `https://minedata.cn/service/search/keyword2`
        //   // const query = {
        //   //   // postStr: '{lon: ' + event.coordinate[0] + ', lat: ' + event.coordinate[1] + ', ver: 1}',
        //   //   keywords: this.poiName,
        //   //   city: 440300,
        //   //   zoom: 12,
        //   //   search_type: 'for_keywords',
        //   //   page_num: this.page.current,
        //   //   page_size: this.page.limit,
        //   //   language: 'zh_CN'
        //   // }
        //   // $.ajax({
        //   //   async: false,
        //   //   url: url,
        //   //   data: query,
        //   //   type: 'GET',
        //   //   dataType: 'json',
        //   //   success: (result) => {
        //   //     console.info(result)
        //   //     if (result.errcode !== 0) {
        //   //       alert('请求错误')
        //   //     } else {
        //   //       this.tableLoading = false
        //   //       const data = result.data
        //   //       this.page.total = data.total
        //   //       data.pois.forEach(item => {
        //   //         console.log('pois---', item)
        //   //         item.properties = {}
        //   //         item.geometry = {}
        //   //         item.properties.name = item.name
        //   //         item.properties.kind = item.typeName
        //   //         item.properties.address = item.address
        //   //         item.geometry.type = 'Point'
        //   //         item.geometry.coordinates = item.location.split(',')
        //   //       })
        //   //       this.dataCollection = data.pois
        //   //       this.showPoi()
        //   //     }
        //   //   },
        //   //   error: (xhr, status, error) => {
        //   //   }
        //   // })
        // } else {
        //   this.$message.error(`${mapTip.Message.poiEmpty}`)
        // }
      },
      /**
       * @Description 在地图中显示兴趣点
       * @Date 2019/12/3 17:22
       * @Author yuesheng.zhu@topevery.club
       */
      showPoi() {
        const poiFeatures = []
        const markers = []
        this.dataCollection.map((item) => {
          if (item.geometry.type === 'Point') {
            item.coordinates = item.geometry.coordinates
            if (this.showPoiTitle) item.title = item.properties.name
            item.clickType = 'poi'
            item.animate = true
            item.id = item.nid
            delete item.geometry
            markers.push(item)
          } else {
            poiFeatures.push(item)
          }
        })
        this.commonMap.showPoiLayer(poiFeatures, markers, false)
      },
      /**
       * @Description 点击兴趣点
       * @Date 2019/12/3 17:22
       * @Author yuesheng.zhu@topevery.club
       */
      handleFeatureSelect(item) {
        if (this.clickPoi.closePoiList) {
          this.closePoi()
        }
        this.commonMap.handleItemSelect(item, 'poi', 'poi')
      },
      /**
       * @Description 显示兴趣点详情
       * @Date 2019/12/3 17:22
       * @Author yuesheng.zhu@topevery.club
       */
      showPoiInfo(item) {
        if (this.clickPoi.showPoiInfo) {
          this.mapDialogVisible = true
        }
        this.poiInfo = item
      },
      /**
       * @Description 清空地图上所有兴趣点
       * @Date 2019/12/3 17:22
       * @Author yuesheng.zhu@topevery.club
       */
      clearPoi() {
        this.poiResultShow = false
        this.poiName = ''
        this.dataCollection = []
        this.page.total = 0
        this.commonMap.clearMarkerFeature('poi')
        this.commonMap.clearPoiLayer()
      },
      /**
       * @Description 关闭兴趣点搜索框
       * @Date 2019/12/3 17:22
       * @Author yuesheng.zhu@topevery.club
       */
      closePoi() {
        this.poiResultShow = false
      }
    }
  }
</script>

<style scoped lang="scss">
</style>
